import { useEffect } from "react";
import { useModel, Outlet, history } from "umi";
import { useReactive } from "ahooks";
import { IconPlusCircle, IconRefresh, IconDelete, IconEdit, IconHelpCircle } from "@douyinfe/semi-icons";
import { Card as SemiCard, Button, ButtonGroup, TabPane, Tabs, List } from "@douyinfe/semi-ui";
import { Table, Space, message, Divider, Popconfirm, Image as AntdImage, Card, Row, Col, Carousel, Alert, Avatar, Tooltip, List as AntdList } from "antd";
import { v4 as uuidv4 } from "uuid";

const { Meta } = Card;

const HomePage = () => {
    const { remoteData, graphqlFetch, windowInnerHeight, defaultImageBase64 } = useModel("global");
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent, setModalStyle } = useModel("global.modal");
    const { organizationUuid, gatewayUrl } = useModel("organization.info");
    const { routers } = useModel("routers");

    const state = useReactive({
        loading: false,
        menus: [],
        selectItem: {},
        selectMenu: null,
    });

    useEffect(() => {
        if (routers["homepage"]) {
            let subMenus = routers["homepage"].subMenus;
            let menus = Object.keys(subMenus).map((key) => {
                const { title } = subMenus[key];
                return { key, title };
            });
            state.menus = menus;
            let selectMenu = menus.find((item) => item.key === state.selectMenu?.key);
            !selectMenu && menus.length > 0 && (selectMenu = menus[0]);
            state.selectMenu = selectMenu;
        }
    }, [routers]);

    useEffect(() => {
        state.selectMenu?.key && history.replace("/homepage/" + state.selectMenu.key);
    }, [state.selectMenu]);

    const cardBodyHeight = windowInnerHeight - 90 - 54 - 20;

    return (
        <div style={{ padding: 10 }}>
            <Row gutter={10}>
                <Col span={19}>
                    <SemiCard
                        // title={<span style={{ lineHeight: "32px", fontSize: 15 }}> 首页设置 </span>}
                        shadows="always"
                        headerStyle={{ padding: "10px 14px" }}
                        bordered={false}
                        bodyStyle={{ padding: 0, height: cardBodyHeight + 54 }}
                    >
                        <div style={{ display: "flex" }}>
                            <div style={{ padding: 1, width: 200, borderRight: "1px solid #eee", height: cardBodyHeight + 54, overflow: "auto" }}>
                                <div style={{ lineHeight: "54px", borderBottom: "1px solid #eee", fontSize: 16, fontWeight: 600, padding: "0 20px" }}>功能导航</div>
                                <List
                                    loading={state.loading}
                                    dataSource={state.menus}
                                    renderItem={(item, index) => {
                                        return (
                                            <List.Item
                                                className={`list-item ${state.selectMenu?.key === item?.key ? "list-item-selected" : ""}`}
                                                main={<div>{item.title}</div>}
                                                onClick={() => (state.selectMenu = item)}
                                            />
                                        );
                                    }}
                                />
                            </div>
                            <div style={{ flex: 1, height: cardBodyHeight, overflow: "auto" }}>
                                <Outlet context={{ selectItem: state.selectItem, cardBodyHeight }} />
                            </div>
                        </div>
                    </SemiCard>
                </Col>
                <Col span={5}>
                    <HomePagePreview cardBodyHeight={cardBodyHeight} />
                </Col>
            </Row>
        </div>
    );
};

const HomePagePreview = ({ cardBodyHeight }) => {
    const { remoteData, graphqlFetch, windowInnerHeight, defaultImageBase64 } = useModel("global");

    const state = useReactive({
        loading: false,
        menus: [],
        selectItem: {},
        selectMenu: null,
    });

    return (
        <SemiCard
            title={<span style={{ lineHeight: "32px", fontSize: 15 }}> 效果预览 </span>}
            shadows="always"
            headerStyle={{ padding: "10px 14px" }}
            headerExtraContent={
                <ButtonGroup>
                    <Button icon={<IconRefresh />}></Button>
                </ButtonGroup>
            }
            bordered={false}
            bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
        >
            <Carousel autoplay>
                <div>
                    <h3 style={contentStyle}>1</h3>
                </div>
                <div>
                    <h3 style={contentStyle}>2</h3>
                </div>
                <div>
                    <h3 style={contentStyle}>3</h3>
                </div>
                <div>
                    <h3 style={contentStyle}>4</h3>
                </div>
            </Carousel>

            <div style={{ padding: 10 }}>
                <Alert style={{ marginTop: 10 }} message="新店开业，欢迎光临，诚信经营，优惠多多！！！" type="warning" />

                <div style={{ marginTop: 10, display: "flex", justifyContent: "space-between" }}>
                    <h3>门店信息</h3>
                    <a></a>
                </div>

                <List
                    loading={state.loading}
                    dataSource={[1, 1]}
                    renderItem={(item, index) => (
                        <div style={{ marginTop: 5 }}>
                            <Card size="small">
                                <List.Item key={index}>
                                    <Meta
                                        avatar={<Avatar width={64} size={64} src={defaultImageBase64} fallback={defaultImageBase64}></Avatar>}
                                        title="汉阳总店"
                                        description={
                                            <div>
                                                <div> 地址：萨达范德萨范德萨发第三方士大夫士大夫萨达富士达f</div>
                                                <div> 电话：135123123</div>
                                            </div>
                                        }
                                    />
                                </List.Item>
                            </Card>
                        </div>
                    )}
                />

                <div style={{ marginTop: 10, display: "flex", justifyContent: "space-between" }}>
                    <h3>推荐套餐</h3>
                    <a>更多</a>
                </div>

                <AntdList
                    grid={{ gutter: 16, column: 2 }}
                    loading={state.loading}
                    dataSource={[1, 1]}
                    renderItem={(item, index) => (
                        <AntdList.Item key={index}>
                            <Card hoverable cover={<AntdImage preview width={"100%"} height={200} src={defaultImageBase64} fallback={defaultImageBase64} />}>
                                <Meta
                                    title="美丽套餐"
                                    description={
                                        <div>
                                            <div style={{ display: "flex", justifyContent: "space-between" }}>
                                                <div> 1999.99</div>
                                                <div> 原价</div>
                                            </div>
                                            <div style={{ display: "flex", justifyContent: "space-between" }}>
                                                <div style={{ color: "red", fontWeight: 700 }}> 999.99</div>
                                                <div style={{ color: "red", fontWeight: 700 }}> 套餐价</div>{" "}
                                            </div>
                                        </div>
                                    }
                                />
                            </Card>
                        </AntdList.Item>
                    )}
                />

                <div style={{ marginTop: 10, display: "flex", justifyContent: "space-between" }}>
                    <h3>推荐商品</h3>
                    <a>更多</a>
                </div>

                <AntdList
                    grid={{ gutter: 16, column: 2 }}
                    loading={state.loading}
                    dataSource={[1, 1]}
                    renderItem={(item, index) => (
                        <AntdList.Item key={index}>
                            <Card hoverable cover={<AntdImage preview width={"100%"} height={200} src={defaultImageBase64} fallback={defaultImageBase64} />}>
                                <Meta
                                    title="美丽套餐"
                                    description={
                                        <div>
                                            <div style={{ display: "flex", justifyContent: "space-between" }}>
                                                <div> 1999.99</div>
                                                <div> 原价</div>
                                            </div>
                                            <div style={{ display: "flex", justifyContent: "space-between" }}>
                                                <div style={{ color: "red", fontWeight: 700 }}> 999.99</div>
                                                <div style={{ color: "red", fontWeight: 700 }}> 会员价</div>{" "}
                                            </div>
                                        </div>
                                    }
                                />
                            </Card>
                        </AntdList.Item>
                    )}
                />

                <div style={{ marginTop: 10, display: "flex", justifyContent: "space-between" }}>
                    <h3>推荐服务</h3>
                    <a>更多</a>
                </div>

                <AntdList
                    grid={{ gutter: 16, column: 2 }}
                    loading={state.loading}
                    dataSource={[1, 1]}
                    renderItem={(item, index) => (
                        <AntdList.Item key={index}>
                            <Card hoverable cover={<AntdImage preview width={"100%"} height={200} src={defaultImageBase64} fallback={defaultImageBase64} />}>
                                <Meta
                                    title="美丽套餐"
                                    description={
                                        <div>
                                            <div style={{ display: "flex", justifyContent: "space-between" }}>
                                                <div> 1999.99</div>
                                                <div> 原价</div>
                                            </div>
                                            <div style={{ display: "flex", justifyContent: "space-between" }}>
                                                <div style={{ color: "red", fontWeight: 700 }}> 999.99</div>
                                                <div style={{ color: "red", fontWeight: 700 }}> 会员价</div>{" "}
                                            </div>
                                        </div>
                                    }
                                />
                            </Card>
                        </AntdList.Item>
                    )}
                />
            </div>
        </SemiCard>
    );
};

const contentStyle = {
    margin: 0,
    height: "280px",
    color: "#fff",
    lineHeight: "160px",
    textAlign: "center",
    background: "#364d79",
};

export default HomePage;
